<template>
    <div>
        <!-- 单向绑定 :value='firstName', script 到 template,   而 template 不能到 script -->
        <!-- 双向绑定 -->
        姓：<input type="text" v-model='firstName' /> <br/>  
        名：<input type="text" v-model="lastName"  /> <br/>
        全名： <span>{{fullName}}</span>
    </div>
</template>
<script lang="ts" setup  name="dataBindAndComputed">
    import { computed,ref } from 'vue';
    let firstName= ref('')
    let lastName= ref('')

    // computed 计算属性与 方式的区别
    // 当computed中使用的变量值不发生改变时，该内容只执行一次，只要使用的变量有变更，就会再执行，而方法只要调用就执行里面的内容
    // 因此可以 认为  计算属性会将计算的结果缓存，当计算内容的变量不变时，直接返回缓存中的内容
//   let fullName= computed(()=>{
//        return firstName.value.substring(0,1).toUpperCase()+ firstName.value.substring(1) +'-'+lastName.value;
//     })

    let fullName = computed({
            get(){
                return firstName.value.substring(0,1).toUpperCase()+ firstName.value.substring(1) +'-'+lastName.value;
            },
            set(val){
                [firstName.value, lastName.value] = val.split('-')
            }
    });
</script>